zoom images

code:
            <div class="scrollable11">
                <div id="image-container11">
                    <img alt="holidays"src="../images/1.jpg" />
                </div>    
            </div>
                <style>
                .scrollable11{ width: 20vw; height: 20vw; overflow: auto; border: 0.2vw solid blue;
                    margin-left: 10vw;}
                #image-container11 {position: absolute; display: block; height: 20vw; width: 20vw; 
                    display: block; text-align: center;}
                #image-container11 img {position: relative; max-width: 60%; max-height: 60%; 
                    margin-block: 4vw;}
                #image-container11 img:hover {cursor: zoom-in;}
            </style>
            <script>
                let currentZoom = 1;
                let minZoom = 0.2;
                let maxZoom = 5;
                let stepSize = 0.2;

                let container11 = document.getElementById("image-container11");
                document.querySelector('.scrollable11').addEventListener('wheel', function(event) {
                    event.preventDefault();
                    let direction = event.deltaY > 0 ? -1 : 1;
                    zoomImage(direction);
                });
                function zoomImage(direction){
                    event.preventDefault();
                    let newZoom = currentZoom + direction * stepSize;
                    if (newZoom < minZoom || newZoom > maxZoom) {
                        return;
                    }
                    currentZoom = newZoom;
                    let image = document.querySelector("#image-container11 img");
                    image.style.transform = "scale(" + currentZoom + ")";
                }
            
            </script>
        

            <div id="zoom_2">
                <img class='zoom_A' src='../images/1.jpg' alt='holiday' width='555' height='420'/>
                <script src="wheelzoom.js"></script> 
            </div>
            <style>
                .zoom_A{width: 60%; height: 60%; margin-left: 10vw; }
            </style>
            <script>
                wheelzoom(document.querySelector('img.zoom_A'));
            </script>
        

code:
            <div class="frame_aa">
                <div id="zoom_3a">
                    <img src="../images/17.jpg" alt="zoom">
                </div>
            </div>
            <style>
                .frame_aa{ width: 30vw; height: 30vw; overflow: auto; border: 0.2vw solid green;margin-left:10vw;}
                #zoom_3a {width: 100%; height: 100%; transform-origin: 0px 0px;  transform: scale(1) 
                    translate(0px, 0px); cursor: grab;}
                div#zoom_3a > img {width: 100%; height: 100%; }
            </style>
            <script>
                var scale_aa = 1, panning = false, pointX = 0, pointY = 0, start = { x: 0, y: 0 }, 
                zoom_aa = document.getElementById("zoom_3a");
                function setTransform1() {
                    zoom_aa.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale_aa + ")";
                }
                zoom_aa.onmousedown = function (e) {
                    e.preventDefault();
                    start = { x: e.clientX - pointX, y: e.clientY - pointY };
                    panning = true;
                }
                zoom_aa.onmouseup = function (e) {
                    e.preventDefault();
                    panning = false;
                }
                zoom_aa.onmousemove = function (e) {
                    e.preventDefault();
                    if (!panning) {
                    return;
                    }
                    pointX = (e.clientX - start.x);
                    pointY = (e.clientY - start.y);
                    setTransform1();
                }
                zoom_aa.onwheel = function (e) {
                    e.preventDefault();
                    var xs = (e.clientX - pointX) / scale_aa, ys = (e.clientY - pointY) / scale_aa, 
                    delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
                    (delta > 0) ? (scale_aa *= 1.2) : (scale_aa /= 1.2);
                    pointX = e.clientX - xs * scale_aa;
                    pointY = e.clientY - ys * scale_aa;
                    setTransform1();
                }
            </script>